import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'
// 准备dom容器 - createVNode + render 动态创建标签或者组件
const divNode = createVNode('div', { class: 'xtx-message-container' })
render(divNode, document.body)
//  虚拟DOM(对象)成功写入到页面后，可通过 el 属性获取到真实DOM节点
const div = divNode.el
// console.log(divNode)

const Message = ({ message, type }) => {
  // 动态创建虚拟DOM  -  createVNode(h) 函数
  const comVNode = createVNode(XtxMessage, { message, type })
  //   渲染到body页面中 -  render 函数
  render(comVNode, div)
  //   提示在 3s 后自动卸载
  setTimeout(() => {
    render(null, div)
  }, 3000)
}
export default Message
